<script setup>
// 引入Vue组合式API
import { ref, watch, computed } from 'vue';
// 引入路由相关API
import { useRoute } from 'vue-router';
// 引入城市状态管理
import { useCityStore } from '../stores/cityStore';
// 引入天气API方法
import { livingdetail } from '../api/weatherAPI';
import { Cityairindex } from '../api/weatherAPI';
import dayjs from 'dayjs';
// 使用城市状态管理
const cityStore = useCityStore();
// 获取当前路由信息
const route = useRoute();
// 存储生活指数每日数据
const indiceDaily = ref([]);
// 存储按类型分组的生活指数数据
const groupedLivingData = ref({});
// 当前选中的生活指数类型，初始值为路由参数中的id
const selectedType = ref(route.params.id); 
//穿的类型，穿过来成为默认type

const levelBgColorMap = {
  1: '#5cb85c',   // 适宜 - 绿色
  2: '#87d068',   // 较适宜 - 浅绿色
  3: '#f0ad4e',   // 较不宜 - 橙色
  4: '#f39c12',   // 不宜 - 深橙色
  5: '#d9534f',   // 非常不宜 - 红色
  6: '#c9302c',   // 极度不宜 - 深红色
  7: '#ac2925',   // 危险 - 更深的红色
  8: '#7f1d1d',   // 极度危险 - 最深的红色
  default: '#fff' // 默认背景色 - 白色
};



const getLevelNumber = (subItem) => {
  return subItem.level;
};

// 监听城市位置变化
watch(
  // 监听数据源：城市位置
  () => cityStore.location,
  // 回调函数：当城市位置变化时执行
  () => {
    const locationId = cityStore.location?.id;
    // 如果有位置ID，获取数据
    if (locationId) {
      getData(locationId);
    }
  },
  // 立即执行一次回调函数
  { immediate: true }
);

// 获取数据函数
// 参数locationID: 城市位置ID
async function getData(locationID) {
  // 获取1天指数数据
  const airindex = await Cityairindex(locationID, 0);
  // 获取3天生活指数详细数据
  const livingidnex = await livingdetail(locationID, 0);
  console.log(airindex);
  console.log(livingidnex);

  // 处理生活指数数据
  const dailyData = livingidnex.daily;
  // 按类型分组生活指数数据
  const groupedData = dailyData.reduce((acc, item) => {
    const type = item.type;
    if (!acc[type]) {
      acc[type] = [];
    }
    acc[type].push(item);
    return acc;
  }, {});
  //变成以type分组，然后每组三个。对应三天。
  groupedLivingData.value = groupedData;

  // 存储空气质量指数数据
  indiceDaily.value = airindex.daily;
}

// 处理类型点击事件
// 参数type: 被点击的生活指数类型
function handleTypeClick(type) {
  // 更新当前选中的类型
  selectedType.value = type;
}


//使用 Vue 的 computed 创建响应式派生数据
const formattedGroupedData = computed(() => {
  return groupedLivingData.value[selectedType.value]?.map(item => ({
    ...item,
    //加属性，通过上面分组的数据，根据传过来的type，返回对应的内容
    categoryBgColor: levelBgColorMap[getLevelNumber(item)] || levelBgColorMap.default
  })) || [];
  //在内容中找到对应的level，返回对应的颜色，找不到返回默认颜色
});
//根据传过来的selectedType，返回对应的背景颜色
const iconMap = {
  '运动指数': '🏋️',  // 举重图标
  '洗车指数': '🚗',  // 汽车图标
  '紫外线指数': '☀️',  // 太阳图标
  '穿衣指数': '👚',  // 衣服图标
  '感冒指数': '🤧',  // 打喷嚏图标
  '空气污染扩散条件指数': '🌫️',  // 雾图标
  '空调开启指数': '🧊',  // 冰块图标
  '太阳镜指数': '🕶️',  // 太阳镜图标
  '化妆指数': '💄',  // 口红图标
  '晾晒指数': '👕',  // T恤图标
  '交通指数': '🚦',  // 交通灯图标
  '钓鱼指数': '🎣',  // 钓鱼竿图标
  '舒适度指数': '😌',  // 放松表情
  '旅游指数': '🛫',  // 飞机起飞图标
  '过敏指数': '🤒',  // 生病表情
  '划船指数': '🚣',  // 划船图标
  '防晒指数': '🌞',  // 太阳图标
   default: '📌'
};
</script>




<template>
  <div class="main-container">
    <!-- 左侧区域 -->
    <div class="left-panel">
      <h2>今日{{ indiceDaily.find(item => item.type === selectedType)?.name }}</h2>
      <!-- indiceDaily.find(...) - 数组查找方法

item => item.type === selectedType - 查找条件

?.name - 安全访问属性 -->
      <div class="icon-display">
        <span class="large-icon">{{ iconMap[formattedGroupedData[0]?.name] }}</span>
          <!-- //是取今天的元素。返回对应的name,再通过name找图标 -->
      </div>
      <div class="description">
        <p class="category-tag" :style="{ backgroundColor: formattedGroupedData[0]?.categoryBgColor }">
          {{ formattedGroupedData[0]?.category }}</p>
        <p class="desc-text">{{ formattedGroupedData[0]?.text }}</p>
      </div>
    </div>
    <!-- 右侧原有内容 -->
    <div class="right-panel">
      <div class="indice">
        <h1>生活指数</h1>
        <!-- 原有类型切换 -->
        <ul>
          <li 
            v-for="(item, i) in indiceDaily" 
            :key="i" 
            @click="handleTypeClick(item.type)" 
            :class="{ active: selectedType === item.type }"
        
          >
          <!-- 点击加active类变色 -->
            <div class="icon-text-wrap">
              <span class="icon">{{ iconMap[item.name]  }}</span>
              <!-- 找图标 -->
              <div class="text">
                <p>{{ item.name }}</p>
                <!-- 对应的名字 -->
              </div>
            </div>
          </li>
        </ul>
        <!-- 内容列表，调整结构 -->
        <div v-if="selectedType">
          <div 
            v-for="(subItem, index) in formattedGroupedData" 
            :key="index"
            class="custom-item"
          >
            <!-- 左侧图标区域 -->
            <div class="icon-wrap">
              <span class="item-icon">{{ iconMap[subItem.name]  }}</span>
            </div>
            <!-- 中间日期区域 -->
            <div class="date-wrap">
              <p class="date-top">{{ dayjs(subItem.date).isSame(dayjs(), 'day') ? '今天' : dayjs(subItem.date).format('M月D日') }}</p>
              <p class="week-text">{{ ['周日','周一','周二','周三','周四','周五','周六'][new Date(subItem.date).getDay()] }}</p>
            </div>
            <!-- 右侧内容区域 -->
            <div class="info-wrap">
              <p 
                class="category-tag" 
                :style="{ backgroundColor: subItem.categoryBgColor }"
              >{{ subItem.category}}</p>
              <p class="desc-text">{{ subItem.text }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.left-panel {
  width: 400px;
  height: 700px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.large-icon {
  font-size: 100px;
  margin: 40px 0;
}

.description {
  text-align: center;
}

.right-panel {
  flex: 1;
}

.indice>ul {
  grid-template-columns: repeat(2, 1fr);
}

/* 保持原有样式 */
.indice>ul {
  text-align: center;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.indice>ul>li {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 10px;
  cursor: pointer;
  transition: all 0.3s ease; 
}
.indice>ul>li.active {
  background-color: #409eff; 
  color: #fff; 
}
.indice>ul>li>p {
  margin: 0px;
  padding: 0px;
}
.indice>ul>li>p:nth-child(1) {
  font-weight: bold;
}

/* 新增自定义内容样式，贴近参考示例 */
.custom-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}
.date-wrap {
  width: 80px;
  text-align: center;
}
.date-top {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.week-text {
  font-size: 14px;
  color: #999;
}
.info-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.category-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 8px;
}
.desc-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 新增图标相关样式 */
.icon-text-wrap {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: center;
}

.icon {
  font-size: 20px;
  line-height: 1;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-item {
  display: grid;
  grid-template-columns: 20px 80px 1fr;
  gap: 12px;
  align-items: flex-start;
}

.icon-wrap {
  width: 20px;
  text-align: center;
}

.item-icon {
  font-size: 20px;
  line-height: 1;
}
</style>